<div class="{{getBaseCssClasses ('invalid-el')}}">
    <div class="{{getBaseCssClasses ('invalid-inner')}}"></div>
</div>

{{#if (hasTrigger)}}
<div class="{{getBaseCssClasses ('trigger')}}">
    <div class="{{getBaseCssClasses ('trigger-inner')}}">&#x25BC;</div>
</div>
{{/if}}

<div class="{{getBaseCssClasses ('input-wrap')}}">

    <input id="ks-combobox-input-{{id}}"
           aria-haspopup="true"
           aria-autocomplete="list"
           aria-haspopup="true"
           role="autocomplete"
           aria-expanded="false"

    {{#if (disabled)}}
    disabled
    {{/if}}

    autocomplete="off"
    class="{{getBaseCssClasses ('input')}}"

    value="{{value}}"
    />


    <label for="ks-combobox-input-{{id}}"
            style='display:{{#if (value)}}none{{else}}block{{/if}};'
    class="{{getBaseCssClasses ('placeholder')}}">
    {{placeholder}}
    </label>

    <div class="{{getBaseCssClasses ('clear')}}"
         unselectable="on"
         {{#if(!value)}}
         style="display:none"
         {{/if}}
         onmousedown="return false;"><div
            class="{{getBaseCssClasses ('clear-inner')}}">clear</div></div>
</div>
